<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <ul>
          <li v-for="blog in data" :key="datas">
            <el-button @click="GetDetail(blog)">{{ blog.Id }}.{{ blog.name }}</el-button>
          </li>
        </ul>
      </el-aside>
      <el-main>
        <div v-html="content" id="content"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {blog} from '@/view/dashboard/article/blog';
import {onMounted, reactive, ref} from "vue";
const data = ref([])
let page = reactive({"page":1,"size":15,"total":0})
const content = ref("")
onMounted(() => {
  ListArticle()
})

const ListArticle = async () => {
  var res = await blog.List(page)
  data.value = res.data
  page.total = res.total
}

const GetDetail = (row) =>{
  content.value = row.content
}
</script>

<style scoped>
.el-aside {
  overflow: auto;
  height: 10%;
}

li {
  list-style: none;
}

#content {
  background-color: #eff6f6;
  overflow: auto;
  width: 86%;
  border-radius: 10px;
  padding: 20px;
  height: 90%;
}
</style>

